<template>
  <div class="app-container">
    <el-form ref="form" v-loading="loading" :model="form" label-width="120px">
      <el-form-item label="选择平台">
        <el-radio-group v-model="form.platform">
          <el-radio label="android">安卓APP</el-radio>
          <!--          <el-radio label="ios">IOS</el-radio>-->
          <el-radio label="h5">移动端H5</el-radio>
          <el-radio label="manager">管理后台</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="发布环境" v-if="form.platform == 'android' || form.platform == 'ios' ">
        <el-radio-group v-model="form.is_test" >
          <el-radio :label="0">公网</el-radio>
          <el-radio :label="1">内部测试</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="状态">
        <el-radio-group v-model="form.status">
          <el-radio :label="1">启用</el-radio>
          <el-radio :label="0">禁用</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="热更新包" v-if="form.platform == 'android' || form.platform == 'ios' ">
        <el-radio-group v-model="form.wgt_flag">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="强制更新" v-if="form.platform == 'android' ">
        <el-radio-group v-model="form.is_force">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="主包版本号" v-if="form.platform == 'android' || form.platform == 'ios'">
        <el-input v-model="form.version" placeholder="请填写版本号，eg：1.0.0"/>
        <div v-show="form.wgt_flag">
          <span class="bs-red">本次是热更新资源包，请务必填写对应主包的版本号，否则更新会错误！！！</span>
        </div>
      </el-form-item>
      <el-form-item label="热版本号" v-if="form.wgt_flag && (form.platform == 'android' || form.platform == 'ios')">
        <el-input v-model="form.wgt_version" type="number" placeholder="每次新包递增，eg：123"/>
        <div>
          <span class="bs-red">一个主包可以有多个子包，每次递增一个版本号，请填写当前子包的版本号</span>
        </div>
      </el-form-item>

      <el-form-item label="更新内容">
        <el-input type="textarea" rows="5" v-model="form.tips" placeholder="更新内容"/>
      </el-form-item>

      <el-form-item label="安装包地址">
        <el-input v-model="form.url" placeholder="输入安装包地址或者从下面上传"/>
        <p></p>
        <upload-chunk :file-size="60" :file-type="fileType" :file-chunk-size="2" @uploaded="afterUpload"></upload-chunk>
      </el-form-item>

      <el-form-item>
        <el-button :loading="submitLoading" type="primary" @click="onSubmit">提交</el-button>
        <el-button @click="$router.push({path:'/package/index'})">返回</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import api from '@/api/package'
import UploadChunk from '@/components/UploadFile/UploadChunk.vue'

export default {
  components: {
    UploadChunk
  },
  data() {
    return {
      loading: false,
      submitLoading: false,
      form: {
        id: 0,
        platform: 'android',
        version: '',
        tips: '',
        url: '',
        status: 1,
        size: 0,
        is_force: 0,
        wgt_url: '',
        wgt_flag: 0,
        wgt_version: 0,
        is_test: 1
      },
      fileType: ['apk','wgt']
    }
  },

  watch: {
    'form.platform': function(newValue, oldValue) {
      if (newValue === 'android' || newValue === 'ios') {
        this.fileType = ['apk', 'wgt']
      }
      if (newValue === 'h5' || newValue === 'manager') {
        this.fileType = ['zip']
      }
    }
  },

  mounted() {
    if (this.$route.query.hasOwnProperty('id')) {
      this.getData(this.$route.query.id)
    }
  },

  methods: {

    getData(id) {
      this.loading = true
      api.info({ id: id }).then((res) => {
        console.log('getData', res)
        this.form = res.data
        this.loading = false
      }).catch(error => {
        this.loading = false
      })
    },

    afterUpload(url) {
      this.form.url = url
    },

    onSubmit() {
      if (this.form.platform === '') {
        return this.$message.error('请选择平台')
      }

      if (!this.form.url){
        return this.$message.error('请上传安装包')
      }
      let request
      if (this.form.id > 0) {
        request = api.update(this.form)
      } else {
        request = api.add(this.form)
      }
      this.submitLoading = true
      request.then((res) => {
        this.$message({
          type: 'success',
          message: res.msg
        })
        this.submitLoading = false
        this.$router.push({ path: '/package/index' })
      }).catch((error) => {
        this.submitLoading = false
      })
    }
  }
}
</script>

<style scoped>
.line {
  text-align: center;
}

.editor-content {
  margin-top: 20px;
}

.article-textarea ::v-deep {

textarea {
  padding-right: 40px;
  resize: none;
  border: none;
  border-radius: 0px;
  border-bottom: 1px solid #bfcbd9;
}

}
</style>

